<template>
   <div class="register" style="margin-top: 30px">
       <i-form :label-width="80">
         <Form-item label="学号/工号：">
           <i-input  placeholder="请输入请输入学号/工号" v-model="user.user_number"></i-input>
         </Form-item>
         <Form-item label="姓名：">
           <i-input  placeholder="请输入姓名" v-model="user.name"></i-input>
         </Form-item>
         <Form-item label="手机号码：">
           <i-input  placeholder="请输入手机号码" v-model="user.phone"></i-input>
         </Form-item>
         <Form-item label="密码：">
           <i-input  placeholder="请输入密码" type="password" v-model="user.password"></i-input>
         </Form-item>
         <Form-item label="确认密码：">
           <i-input  placeholder="请再次密码" type="password" v-model="user.password1"></i-input>
         </Form-item>
         <Form-item label="用户类型：">
           <Radio-group >
             <i-select placeholder="请选择用户类型" v-model="user.user_type">
               <i-option    value="教师">教师</i-option>
               <i-option    value="学生">学生</i-option>
             </i-select>
           </Radio-group>
         </Form-item>
         <Form-item label="选择班级：" >
           <i-select  placeholder="请选择班级" v-model="user.fk_classId">
             <i-option v-for=" item in classList" :value="item.class_id" :key="item.class_id">{{item.class_name}}</i-option>
           </i-select>
         </Form-item>
         <Form-item label="选择性别：" >
           <i-select placeholder="请选择性别" v-model="user.sex">
             <i-option    value="男">男生</i-option>
             <i-option    value="女">女生</i-option>
           </i-select>
         </Form-item>
         <Form-item label="密保问题：" >
           <i-select placeholder="请选择密保问题"  v-model="user.problme_id">
             <i-option  v-for="problem in problemList" :key="problem.problem_id" :value="problem.problem_id">{{problem.content}}</i-option>
           </i-select>
         </Form-item>
         <Form-item label="密保答案：" >
           <i-input  placeholder="请输入密保答案" v-model="user.answer"></i-input>
         </Form-item>
         <Form-item>
           <i-button type="primary" @click="register()">确认注册</i-button>
         </Form-item>
       </i-form>
   </div>
</template>

<script>
  import api from '../../api/index'
    export default {
        name: "register",
      data () {
        return {
          classList:[],//获取班级列表
          problemList:[],//获取密保问题列表
          user:{
            user_number:'',
            phone:'',
            name:'',
            fk_classId:'',
            sex:'',
            user_type:'',
            password:'',
            password1:'',
            problme_id:'',
            answer:'',
          }
        }
      },
      methods:{
        register() {
          console.log(this.user);
          if(!this.user.user_number){
            this.$Message.warning('请输入学号或者工号');
            return;
          }else if(!this.user.name){
            this.$Message.warning('请输入姓名');
            return;
          }else if(!this.user.phone){
            this.$Message.warning('请输入联系方式');
            return;
          }else if(!this.user.user_type){
            this.$Message.warning('请选择用户类型');
            return;
          }else if(!this.user.fk_classId){
            this.$Message.warning('请选择班级');
            return;
          }else if(!this.user.problme_id){
            this.$Message.warning('请选择密保问题');
            return;
          }else if(!this.user.answer){
            this.$Message.warning('请输入密保答案');
            return;
          }else if(this.user.password!==this.user.password1){
            this.$Message.warning('两次密保答案不一致请确认');
          }else {
              api.register(this.user).then(res=>{
                if(res.status==1){
                  this.$Message.success('用户注册成功即将跳转登录页面');
                  //路由跳转
                  this.$router.push({ name: 'login' });
                }
              })
          }
        },
      },
      mounted(){
          api.getClassList().then(res=>{
            if(res.status==1){
              this.classList = res.data;
            }
          });
          api.getProblemList().then(res=>{
            if(res.status==1){
              this.problemList = res.data;
            }
          })
      }
    }
</script>

<style  scoped>
  .register{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
